<template>
  <frame-view>
    <!-- 状态栏 -->
    <status-bar></status-bar>
    <!-- 标题栏 -->
    <title-bar
      :titleProp="$t('setting.deviceSetting')"
      :pageTypeProp="2"
      @clickGoBack="goBack"
    ></title-bar>
    <!-- 滚动栏 -->
    <scroll-view>
      <second-page-margin :deviceTypePro="this.deviceType">
        <card-divider :heightPro="8"></card-divider>
        <second-card>
          <!-- 自动翻盖 -->
          <CardItemSwitchView
            :titlePro="$t('setting.autoCover')"
            :isCheckedPro="this.coverValue"
            @switchChange="coverValueChange"
          ></CardItemSwitchView>
          <second-card-divider />
          <!-- 感应翻盖距离 -->
          <CardItemStateView
            :titlePro="getAutoCoverModeTitle"
            :stateValuePro="getAutoCoverModeState"
            :darkModePro="this.darkMode"
            @click="clickAutoCoverMode"
          ></CardItemStateView>
          <second-card-divider />
          <!-- 氛围灯模式 -->
          <!-- <CardItemStateView
            :titlePro="getLightModeTitle"
            :stateValuePro="getLightModeState"
            :darkModePro="this.darkMode"
            @click="clickLightMode"
          >
          </CardItemStateView>
          <second-card-divider /> -->
          <!-- 自动冲刷模式 -->
          <!-- <CardItemStateView
            :titlePro="getFlushModeTitle"
            :stateValuePro="getFlushModeState"
            :darkModePro="this.darkMode"
            @click="clickFlushMode"
          >
          </CardItemStateView>
          <second-card-divider></second-card-divider> -->
          <!-- 红光理疗时长 -->
          <!-- <CardItemStateView
            :titlePro="getRedLightTimeTitle"
            :stateValuePro="getRedLightTimeState"
            :darkModePro="this.darkMode"
            @click="clickRedLightTime"
          ></CardItemStateView>
          <second-card-divider /> -->
          <!-- 蓝光理疗时长 -->
          <!-- <CardItemStateView
            :titlePro="getBlueLightTimeTitle"
            :stateValuePro="getBlueLightTimeState"
            :darkModePro="this.darkMode"
            @click="clickBlueLightTime"
          ></CardItemStateView>
          <second-card-divider /> -->
          <!-- 自动冲刷 -->
          <CardItemSwitchView
            :titlePro="$t('setting.autoFlush')"
            :isCheckedPro="this.flushValue"
            @switchChange="flushValueChange"
          ></CardItemSwitchView>
          <second-card-divider />
          <!-- 氛围灯 -->
          <CardItemSwitchView
            :titlePro="$t('setting.atmosphereLight')"
            :isCheckedPro="this.atmosphereLight"
            @switchChange="atmosphereLightValueChange"
          ></CardItemSwitchView>
          <second-card-divider />
          <!-- 脚感小冲 -->
          <CardItemSwitchView
            :titlePro="$t('setting.footfeelFlush')"
            :isCheckedPro="this.footfeelFlush"
            @switchChange="footfeelFlushValueChange"
          ></CardItemSwitchView>
          <second-card-divider />
          <!-- UV杀菌 -->
          <!-- <CardItemSwitchView
            :titlePro="$t('setting.autoUV')"
            :isCheckedPro="this.uvValue"
            @switchChange="uvValueChange"
          >
          </CardItemSwitchView>
          <second-card-divider /> -->
          <!-- 四季温感 -->
          <CardItemSwitchView
            :titlePro="$t('setting.autoTemp')"
            :isCheckedPro="this.tempValue"
            @switchChange="tempValueChange"
          ></CardItemSwitchView>
          <second-card-divider />
          <!-- 光感夜灯 -->
          <CardItemSwitchView
            :titlePro="$t('setting.autoLight')"
            :isCheckedPro="this.lightValue"
            @switchChange="lightValueChange"
          ></CardItemSwitchView>
          <second-card-divider />
          <!-- 落座发泡 -->
          <CardItemSwitchView
            :titlePro="$t('setting.sitBubble')"
            :isCheckedPro="this.sitBubbleValue"
            @switchChange="sitBubbleValueChange"
          ></CardItemSwitchView>
          <second-card-divider />
          <!-- 预湿润 -->
          <CardItemSwitchView
            :titlePro="$t('setting.autoMoist')"
            :isCheckedPro="this.autoMoistValue"
            @switchChange="autoMoistValueChange"
          ></CardItemSwitchView>

          <!-- 关盖冲厕 -->
          <!-- <CardItemSwitchView
            :titlePro="$t('setting.closeCoverFlush')"
            :isCheckedPro="this.closeLidToFlushingValue"
            @switchChange="closeLidToFlushValueChange"
            :visiblePro="this.flushValue ? 'visible' : 'gone'"
          ></CardItemSwitchView>
          <second-card-divider
            :visiblePro="this.flushValue ? 'visible' : 'gone'"
          ></second-card-divider> -->
          <!-- 自动小冲 -->
          <!-- <CardItemSwitchView
            :titlePro="$t('setting.autoSmallFlush')"
            :isCheckedPro="this.smallFlushValue"
            @switchChange="smallFlushValueChange"
          ></CardItemSwitchView>
          <second-card-divider /> -->
          <!-- 手势控制 -->
          <!-- <CardItemSwitchView
            :titlePro="$t('setting.handControl')"
            :isCheckedPro="this.handControlValue"
            @switchChange="handControlValueChange"
          ></CardItemSwitchView>
          <second-card-divider /> -->
          <!-- 自动除臭 -->
          <!-- <CardItemSwitchView
            :titlePro="$t('setting.autoDeodorize')"
            :isCheckedPro="this.autoDeodorizeValue"
            @switchChange="autoDeodorizeValueChange"
          ></CardItemSwitchView>
          <second-card-divider /> -->
          <!-- 开圈发泡 -->
          <!-- <CardItemSwitchView
            :titlePro="$t('setting.ringBubble')"
            :isCheckedPro="this.ringBubbleValue"
            @switchChange="ringBubbleValueChange"
          ></CardItemSwitchView>
          <second-card-divider /> -->
          <!-- <second-card-divider /> -->
          <!-- 风挡摆动 -->
          <!-- <CardItemDoubleLineSwitchView
            :titlePro="$t('setting.swing')"
            :subtitlePro="$t('setting.swingTip')"
            :isCheckedPro="this.swingValue"
            @switchChange="swingValueChange"
          ></CardItemDoubleLineSwitchView> -->
        </second-card>
        <card-divider></card-divider>
        <!-- <second-card>
          <title-subtitle-switch-item-view
            :titlePro="$t('setting.swing')"
            :subtitlePro="$t('setting.swingTip')"
            :isCheckedPro="this.swingValue"
          ></title-subtitle-switch-item-view>
        </second-card> -->
        <card-divider :heightPro="30"></card-divider>
      </second-page-margin>
    </scroll-view>

    <!-- 冲刷模式选择框 -->
    <select-list-dialog
      :deviceTypePro="this.deviceType"
      :listData="flushModeList"
      :darkModePro="this.darkMode"
      :selectedIndexPro="getFlushModeSelectedIndex"
      :selectVisiblePro="this.flushModeDialogVisible"
      :selectVisible.sync="flushModeDialogVisible"
      @clickItem="clickFlushModeItem"
    ></select-list-dialog>
    <!-- 氛围灯模式选择框 -->
    <select-list-dialog
      :deviceTypePro="this.deviceType"
      :listData="lightModeList"
      :darkModePro="this.darkMode"
      :selectedIndexPro="getLightModeSelectedIndex"
      :selectVisiblePro="this.lightModeDialogVisible"
      :selectVisible.sync="lightModeDialogVisible"
      @clickItem="clickLightModeItem"
    ></select-list-dialog>
    <!-- 自动翻盖模式选择框 -->
    <select-list-dialog
      :deviceTypePro="this.deviceType"
      :listData="autoCoverModeList"
      :darkModePro="this.darkMode"
      :selectedIndexPro="getAutoCoverModeSelectedIndex"
      :selectVisiblePro="this.autoCoverDialogVisible"
      :selectVisible.sync="autoCoverDialogVisible"
      @clickItem="clickAutoCoverModeItem"
    ></select-list-dialog>
    <!-- 红光理疗时长选择框 -->
    <select-list-dialog
      :deviceTypePro="this.deviceType"
      :listData="redLightTimeList"
      :darkModePro="this.darkMode"
      :selectedIndexPro="getRedLightTimeSelectedIndex"
      :selectVisiblePro="this.redLightTimeDialogVisible"
      :selectVisible.sync="redLightTimeDialogVisible"
      @clickItem="clickRedLightTimeItem"
    ></select-list-dialog>
    <!-- 蓝光理疗时长选择框 -->
    <select-list-dialog
      :deviceTypePro="this.deviceType"
      :listData="blueLightTimeList"
      :darkModePro="this.darkMode"
      :selectedIndexPro="getBlueLightTimeSelectedIndex"
      :selectVisiblePro="this.blueLightTimeDialogVisible"
      :selectVisible.sync="blueLightTimeDialogVisible"
      @clickItem="clickBlueLightTimeItem"
    ></select-list-dialog>
  </frame-view>
</template>
<script>
import "../assets/css/setting.css";
import "../assets/css/frame.css";

import {
  refreshWebView,
  modifyTitleBar,
  setChangeTitleStyle,
  overrideTitleBarRightBtn,
  setgoSettingListener,
  setMessageVisible,
  getStatusBarHeight,
  setStatuBarHeightListener,
  sendProperty,
  setPropertiesListener,
  setNavigationVisible,
  getDevCacheAll,
  getProperty,
  toast,
  debugLog,
  userLog,
  getDarkMode,
  finishDeviceActivity,
  deleteDevice,
  modifyDeviceName,
  modifyDeviceNameById,
  modifyRoomName,
  getDeviceInfo,
  setDeviceInfoListener,
  getDevInfoAll,
  setDevInfoAllListener,
  setDeleteDeviceCallBack,
  setModifyDeviceNameCallBack,
  setModifyDeviceNameByIdCallBack,
  setModifyRoomCallBack,
  setSendPropertyListener,
  setRequestPropertyListener,
  setOnResumeListener,
  setOnPauseListener,
  createRule,
  setCreateRuleListener,
  deleteRule,
  setDeleteRuleListener,
  getRules,
  setGetRuleListener,
  controlRuleActive,
  setControlRuleActiveListener,
  jumpToSetting,
  setJumpToSettingListener,
  getSwitchProperties,
  setRequestSwitchPropertiesListener,
  getControlProperties,
  setRequestControlPropertiesListener,
  getStatusProperties,
  setRequestStatusPropertiesListener,
  getGearProperties,
  setRequestGearPropertiesListener,
  getWarnEventProperties,
  setRequestWarnEventPropertiesListener,
  getFaultEventProperties,
  setRequestFaultEventPropertiesListener,
  isScreenSpreaded,
  getCurrentTime,
} from "../assets/js/device.js";
import {
  WIDTH_PHONE,
  PHONE_RATIO,
  WIDTH_SPREADED,
  SPREADED_RATIO,
  WIDTH_PAD_PORTRAIT,
  PAD_PORTRAIT_RATIO,
  WIDTH_PAD_LANDSCAPE,
  PAD_LANDSCAPE_RATIO,
  WIDTH_STANDARD,
  SPREADED_SCREEN_RATIO,
  selectWidth,
  flexibleWidth,
  flexibleHeight,
  screenDpr,
  screenType,
  screenDescription,
  isIOS,
  isSpreadOn,
  screenSize,
  getSecondPageMarginStyle,
  getSecondPageStyle,
  getDialogFlexAlign,
  getDialogStyle,
  getSingleButtonStyle,
  setScreenResizeListener,
  itemWidth,
} from "../assets/js/flexible.js";

import Const from "../const/const.js";

import FrameView from "./custom/frame/FrameView.vue";
import ScrollView from "./custom/frame/ScrollView.vue";
import SecondPageMargin from "./custom/frame/second/SecondPageMargin.vue";
import SecondCard from "./custom/frame/second/SecondCard.vue";
import SecondCardDivider from "./custom/frame/second/SecondCardDivider.vue";
import StatusBar from "./custom/frame/StatusBar.vue";
import TitleBar from "./custom/frame/TitleBar.vue";
import CardDivider from "./custom/CardDivider.vue";
import MySwitch from "./custom/MySwitch.vue";
import CardItemSwitchView from "./custom/setting/CardItemSwitchView.vue";
import CardItemStateView from "./custom/setting/CardItemStateView.vue";
import CardItemDoubleLineSwitchView from "./custom/setting/CardItemDoubleLineSwitchView.vue";
import DialogContainer from "./custom/dialog/DialogContainer.vue";
import DialogTitleView from "./custom/dialog/DialogTitleView.vue";
import DialogConfirmView from "./custom/dialog/DialogConfirmView.vue";
import SelectListDialog from "./custom/dialog/selectlist/SelectListDialog.vue";

import eventBus from "../assets/js/eventbus.js";
export default {
  name: "Setting",
  components: {
    FrameView,
    ScrollView,
    SecondCardDivider,
    SecondCard,
    SecondPageMargin,
    StatusBar,
    TitleBar,
    CardDivider,
    MySwitch,
    CardItemSwitchView,
    CardItemStateView,
    CardItemDoubleLineSwitchView,
    DialogContainer,
    DialogTitleView,
    DialogConfirmView,
    SelectListDialog,
  },
  data() {
    return {
      darkMode: "light", //暗黑/白天模式
      deviceType: 1,

      flushModeValue: 2, //冲刷模式值：0-静音冲 1-节能冲 2-智慧冲
      lightModeValue: 3, //氛围灯模式值: 0-关闭 1-森林光束 2-静谧极光 3-浪漫海滩
      autoCoverModeValue: 0, //自动翻盖模式值：1-翻盖感应距离近 0-翻盖感应距离远
      redLightTimeValue: 2, //红光理疗时长值：0-5分钟 1-10分钟 2-15分钟 3-20分钟
      blueLightTimeValue: 2, //蓝光理疗时长值：0-5分钟 1-10分钟 2-15分钟 3-20分钟
      flushModeState: "",
      lightModeState: "",
      autoCoverState: "",
      redLightTimeState: "",
      blueLightTimeState: "",
      flushModeDialogVisible: false,
      lightModeDialogVisible: false,
      autoCoverDialogVisible: false,
      redLightTimeDialogVisible: false, //红光理疗时长对话框是否可见
      blueLightTimeDialogVisible: false, //蓝光理疗时长对话框是否可见

      flushModeList: {
        title: "",
        selectedIndex: -1,
        values: [],
        indexs: [],
        list: [],
      }, //冲刷模式列表
      lightModeList: {
        title: "",
        selectedIndex: -1,
        values: [],
        indexs: [],
        list: [],
      }, //氛围灯模式列表
      autoCoverModeList: {
        title: "",
        selectedIndex: -1,
        values: [],
        indexs: [],
        list: [],
      }, //自动翻盖模式列表
      redLightTimeList: {
        title: "",
        selectedIndex: -1,
        values: [],
        indexs: [],
        list: [],
      }, //红光理疗时长
      blueLightTimeList: {
        title: "",
        selectedIndex: -1,
        values: [],
        indexs: [],
        list: [],
      }, //蓝光理疗时长

      ringBubbleValue: false, //开圈发泡开关
      sitBubbleValue: false, //落座发泡开关
      autoMoistValue: false, //预湿润开关
      flushValue: false, //自动冲刷开关
      coverValue: false, //自动翻盖开关
      closeLidToFlushingValue: false, //关盖冲厕开关
      smallFlushValue: false, //自动小冲开关
      uvValue: false, //UV杀菌开关
      handControlValue: false, //手势控制开关
      tempValue: false, //四季温感开关
      lightValue: false, //光感夜灯开关
      autoDeodorizeValue: false, //自动除臭
      swingValue: false, //风门摆动开关
      atmosphereLight: false, //氛围灯开关
      footfeelFlush: false, //脚感小冲

      //缓存数据
      settingData: null,
      toiletGearData: null,

      uiLockTimer: "", //定时器：发送指令后，锁定UI不更新3秒钟，避免状态错误
      uiIsLocking: false, //锁：发送指令后，锁定UI不更新3秒钟，避免状态错误
    };
  },

  created() {
    /*------------------------设置监听器（必须放在前面）-------------------------*/
    //设置发送指令的回调函数
    setSendPropertyListener(this.sendPropertyListener);
    //设备属性事件监听器
    setPropertiesListener(this.propertiesListener);
    /*----------------------------------------------------------------------*/

    //设置标题栏可见性
    setNavigationVisible(false);
    if (getDarkMode() === 2) {
      modifyTitleBar(true);
      this.darkMode = "dark";
    } else {
      modifyTitleBar(false);
      this.darkMode = "light";
    }

    //获取设备所有属性参数（旧接口）
    // setDeviceInfoListener(this.updateDeviceInfo);
    //获取设备所有属性参数（旧接口）
    // getDeviceInfo();
    //获取设备所有属性参数（新接口）
    setDevInfoAllListener(this.updateDevInfoAll);
    getDevInfoAll();
  },

  mounted() {
    //屏幕类型
    this.deviceType = screenType;
    //监听屏幕尺寸变化
    setScreenResizeListener(this.updateScreenResize);

    //添加监听器：右滑或点击系统返回键关闭页面
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL);
      window.addEventListener("popstate", this.goBack, false);
    }

    this.flushModeList = {
      title: this.$i18n.t("setting.flushMode"),
      values: [2, 1, 0],
      indexs: [2, 1, 0],
      selectedIndex: 2,
      list: [
        this.$i18n.t("setting.flushModeAuto"),
        this.$i18n.t("setting.flushModeEco"),
        this.$i18n.t("setting.flushModeSilent"),
      ],
    };

    this.lightModeList = {
      title: this.$i18n.t("setting.lightMode"),
      values: [1, 3, 2, 0],
      indexs: [3, 0, 2, 1],
      selectedIndex: 3,
      list: [
        this.$i18n.t("setting.lightModeForest"),
        this.$i18n.t("setting.lightModeBeach"),
        this.$i18n.t("setting.lightModeAurora"),
        this.$i18n.t("setting.lightModeClose"),
      ],
    };

    this.autoCoverModeList = {
      title: this.$i18n.t("setting.autoFlipMode"),
      values: [1, 0],
      indexs: [1, 0],
      selectedIndex: 0,
      list: [
        this.$i18n.t("setting.autoFlipModeFar"),
        this.$i18n.t("setting.autoFlipModeNear"),
      ],
    };

    this.redLightTimeList = {
      title: this.$i18n.t("setting.redLightTime"),
      values: [1, 2, 3, 4],
      indexs: [0, 0, 1, 2, 3],
      selectedIndex: 2,
      list: [
        this.$i18n.t("setting.redLightTIme1"),
        this.$i18n.t("setting.redLightTIme2"),
        this.$i18n.t("setting.redLightTIme3"),
        this.$i18n.t("setting.redLightTIme4"),
      ],
    };

    this.blueLightTimeList = {
      title: this.$i18n.t("setting.blueLightTime"),
      values: [1, 2, 3, 4],
      indexs: [0, 0, 1, 2, 3],
      selectedIndex: 2,
      list: [
        this.$i18n.t("setting.blueLightTIme1"),
        this.$i18n.t("setting.blueLightTIme2"),
        this.$i18n.t("setting.blueLightTIme3"),
        this.$i18n.t("setting.blueLightTIme4"),
      ],
    };
  },

  activated() {
    //设备属性事件监听器
    setPropertiesListener(this.propertiesListener);
  },

  destroyed() {
    //移除监听器：右滑或点击系统返回键关闭页面
    window.removeEventListener("popstate", this.goBack, false);
  },

  watch: {},

  computed: {
    getRedLightTimeSelectedIndex() {
      return this.redLightTimeList.indexs[this.redLightTimeValue];
    },
    getBlueLightTimeSelectedIndex() {
      return this.blueLightTimeList.indexs[this.blueLightTimeValue];
    },
    getLightModeSelectedIndex() {
      return this.lightModeList.indexs[this.lightModeValue];
    },
    getFlushModeSelectedIndex() {
      return this.flushModeList.indexs[this.flushModeValue];
    },
    getAutoCoverModeSelectedIndex() {
      return this.autoCoverModeList.indexs[this.autoCoverModeValue];
    },
    //冲刷模式标题
    getFlushModeTitle() {
      return this.flushModeList.title;
    },
    //冲刷模式状态值
    getFlushModeState() {
      return this.flushModeList.list[this.flushModeList.selectedIndex];
    },
    //氛围灯模式标题
    getLightModeTitle() {
      return this.lightModeList.title;
    },
    //氛围灯模式状态值
    getLightModeState() {
      return this.lightModeList.list[this.lightModeList.selectedIndex];
    },
    //自动翻盖模式标题
    getAutoCoverModeTitle() {
      return this.autoCoverModeList.title;
    },
    //红光理疗时长标题
    getRedLightTimeTitle() {
      return this.redLightTimeList.title;
    },
    //蓝光理疗时长标题
    getBlueLightTimeTitle() {
      return this.blueLightTimeList.title;
    },
    //自动翻盖模式状态值
    getAutoCoverModeState() {
      return this.autoCoverModeList.list[this.autoCoverModeList.selectedIndex];
    },
    //红光理疗时间状态值
    getRedLightTimeState() {
      return this.redLightTimeList.list[this.redLightTimeList.selectedIndex];
    },
    //蓝光理疗时间状态值
    getBlueLightTimeState() {
      return this.blueLightTimeList.list[this.blueLightTimeList.selectedIndex];
    },
  },

  methods: {
    //点击冲刷模式
    clickFlushMode() {
      console.log("点击冲刷模式");
      this.flushModeDialogVisible = true;
    },
    //选中某个冲刷模式
    clickFlushModeItem(key) {
      this.flushModeList.selectedIndex = key;
      this.flushModeState = this.flushModeList.list[key];
      this.flushModeValue = this.flushModeList.values[key];
      let data = { setting: { flushMode: this.flushModeValue } };
      this.prepareSendProperty(data);
    },
    //点击氛围灯模式
    clickLightMode() {
      console.log("点击氛围灯模式");
      this.lightModeDialogVisible = true;
    },
    //选中某个氛围灯模式
    clickLightModeItem(key) {
      this.lightModeList.selectedIndex = key;
      this.lightModeState = this.lightModeList.list[key];
      this.lightModeValue = this.lightModeList.values[key];
      let data = { setting: { ambientLight: this.lightModeValue } };
      this.prepareSendProperty(data);
    },
    //选中某个红光时长选项
    clickRedLightTimeItem(key) {
      this.redLightTimeList.selectedIndex = key;
      this.redLightTimeState = this.redLightTimeList.list[key];
      this.redLightTimeValue = this.redLightTimeList.values[key];
      let data = { toiletGear: { redLight: this.redLightTimeValue } };
      this.prepareSendProperty(data);
    },
    //选中某个蓝光时长选项
    clickBlueLightTimeItem(key) {
      this.blueLightTimeList.selectedIndex = key;
      this.blueLightTimeState = this.blueLightTimeList.list[key];
      this.blueLightTimeValue = this.blueLightTimeList.values[key];
      let data = { toiletGear: { blueLight: this.blueLightTimeValue } };
      this.prepareSendProperty(data);
    },
    //点击自动翻盖模式按钮
    clickAutoCoverMode() {
      console.log("点击自动翻盖模式");
      this.autoCoverDialogVisible = true;
    },
    //点击红光理疗时长按钮
    clickRedLightTime() {
      console.log("点击红光理疗时长按钮");
      this.redLightTimeDialogVisible = true;
    },
    //点击蓝光理疗时长按钮
    clickBlueLightTime() {
      console.log("点击蓝光理疗时长按钮");
      this.blueLightTimeDialogVisible = true;
    },
    //选中某个自动翻盖模式
    clickAutoCoverModeItem(key) {
      this.autoCoverModeList.selectedIndex = key;
      this.autoCoverState = this.autoCoverModeList.list[key];
      this.autoCoverModeValue = this.autoCoverModeList.values[key];
      let data = { setting: { sensingRange: this.autoCoverModeValue } };
      this.prepareSendProperty(data);
    },

    updateScreenResize(newScreenType) {
      this.deviceType = newScreenType;
    },
    //获取设备所有控制属性值的回调方法用于刷新UI
    updateDevInfoAll: function (data) {
      // toast(1000, "updateDevInfoAll");
      console.log("新接口getDevInfoAll：");
      console.log(data);
      if (data.services != null) {
        this.testSettingData = data;
        for (var i = 0; i < data.services.length; i++) {
          this.propertiesListener(data.services[i]);
        }
      }
    },

    //获取设备信息并刷新UI（初始化设备状态）
    updateDeviceInfo: function (data) {
      if (data.services != null) {
        for (var i = 0; i < data.services.length; i++) {
          this.propertiesListener(data.services[i]);
        }
      }
    },

    //设置开圈发泡开关
    ringBubbleValueChange(newValue) {
      let sendVal = newValue ? 1 : 0;
      this.ringBubbleValue = newValue;
      //TODO 属性名待定
      let data = { setting: { seatOpenFoaming: sendVal } };
      this.prepareSendProperty(data);
    },
    //设置落座发泡开关
    sitBubbleValueChange(newValue) {
      let sendVal = newValue ? 1 : 0;
      this.sitBubbleValue = newValue;
      //TODO 属性名待定
      let data = { setting: { sitdownFoaming: sendVal } };
      this.prepareSendProperty(data);
    },
    //设置预湿润开关
    autoMoistValueChange(newValue) {
      let sendVal = newValue ? 1 : 0;
      this.autoMoistValue = newValue;
      //TODO 属性名待定
      let data = { setting: { prewet: sendVal } };
      this.prepareSendProperty(data);
    },
    //设置氛围灯开关
    atmosphereLightValueChange(newValue) {
      let sendVal = newValue ? 1 : 0;
      this.atmosphereLight = newValue;
      let data = { setting: { ambientLight: sendVal } };
      this.prepareSendProperty(data);
    },
    //脚感小冲开关
    footfeelFlushValueChange(newValue) {
      let sendVal = newValue ? 1 : 0;
      this.footfeelFlush = newValue;
      let data = { setting: { footFeel: sendVal } };
      this.prepareSendProperty(data);
    },
    //设置关盖冲厕
    closeLidToFlushValueChange(newValue) {
      let sendVal = newValue ? 1 : 0;
      this.closeLidToFlushingValue = newValue;
      let data = { setting: { closeLidToFlushing: sendVal } };
      this.prepareSendProperty(data);
    },
    //设置自动冲刷
    flushValueChange(newValue) {
      let sendVal = newValue ? 1 : 0;
      this.flushValue = newValue;
      let data = { setting: { autoFlushing: sendVal } };
      this.prepareSendProperty(data);
    },
    //设置自动翻盖
    coverValueChange(newValue) {
      let sendVal = newValue ? 1 : 0;
      this.coverValue = newValue;
      let data = { setting: { autoFlip: sendVal } };
      this.prepareSendProperty(data);
    },
    //设置自动小冲
    smallFlushValueChange(newValue) {
      let sendVal = newValue ? 1 : 0;
      this.smallFlushValue = newValue;
      //TODO 属性名待定
      let data = { setting: { autoSmallFlushing: sendVal } };
      this.prepareSendProperty(data);
    },
    //设置UV杀菌
    uvValueChange(newValue) {
      let sendVal = newValue ? 1 : 0;
      this.uvValue = newValue;
      //TODO 属性名待定
      let data = { setting: { UVDisinfect: sendVal } };
      this.prepareSendProperty(data);
    },
    //设置手势控制开关
    handControlValueChange(newValue) {
      let sendVal = newValue ? 1 : 0;
      this.handControlValue = newValue;
      //TODO 属性名待定
      let data = { setting: { handSwing: sendVal } };
      this.prepareSendProperty(data);
    },

    //设置四季温感
    tempValueChange(newValue) {
      this.tempValue = newValue;
      let sendVal = newValue ? 1 : 0;
      let data = { setting: { tempSensor: sendVal } };
      this.prepareSendProperty(data);
    },
    //设置光感夜灯
    lightValueChange(newValue) {
      this.lightValue = newValue;
      let sendVal = newValue ? 1 : 0;
      let data = { setting: { lightSense: sendVal } };
      this.prepareSendProperty(data);
    },
    //设置自动除臭
    autoDeodorizeValueChange(newValue) {
      this.autoDeodorizeValue = newValue;
      let sendVal = newValue ? 1 : 0;
      let data = { setting: { autoDeodorization: sendVal } };
      this.prepareSendProperty(data);
    },
    //设置风门摆动开关
    swingValueChange(newValue) {
      this.swingValue = newValue;
      let sendVal = newValue ? 1 : 0;
      let data = { setting: { swingDry: sendVal } };
      this.prepareSendProperty(data);
    },

    //发送指令
    prepareSendProperty: function (jsObject) {
      clearTimeout(this.uiLockTimer);
      this.uiIsLocking = true;
      this.uiLockTimer = setTimeout(() => {
        console.log("发送指令3s后更新UI");
        this.uiIsLocking = false;
        // this.updateUIFromData();
        getDevInfoAll();
      }, 3000);
      sendProperty(jsObject);
    },
    //发送指令后的回调
    sendPropertyListener: function (data) {
      if (data.errcode === 0) {
        // toast(2000, "指令发送成功");
      } else {
        // toast(2000, "指令发送失败");
        this.updateUIFromData();
        console.log("指令发送失败");
      }
    },
    //用缓存更新UI
    updateUIFromData() {
      if (this.settingData != null) {
        this.updateUI(this.settingData);
      }
      if (this.toiletGearData != null) {
        this.updateUI(this.toiletGearData);
      }
    },

    // //用请求的服务数据更新UI
    // updateUIFromServiceData: function (data) {
    //   if (data.autoMagicBubble !== undefined) {
    //     this.paoValue = data.autoMagicBubble === 1;
    //   }
    //   if (data.autoFlip !== undefined) {
    //     this.coverValue = data.autoFlip === 1;
    //   }
    //   if (data.autoFlushing !== undefined) {
    //     this.flushValue = data.autoFlushing === 1;
    //   }
    //   if (data.tempSensor !== undefined) {
    //     this.tempValue = data.tempSensor === 1;
    //   }
    //   if (data.lightSense !== undefined) {
    //     this.lightValue = data.lightSense === 1;
    //   }
    //   if (data.footFeel !== undefined) {
    //     this.footValue = data.footFeel === 1;
    //   }
    // },

    //处理属性上报事件(处理设备上传的属性事件)
    propertiesListener: function (data) {
      if (data.sid === undefined || data.data === undefined) return;
      //先缓存数据
      if (data.sid === "setting") {
        this.settingData = data;
      }
      if (data.sid === "toiletGear") {
        this.toiletGearData = data;
      }
      //是否锁定UI更新
      if (this.uiIsLocking) {
        return;
      }
      this.updateUI(data);
    },
    //更新UI
    updateUI(data) {
      // 根据上报的数据，更新UI
      if (data.sid !== undefined && data.sid === "setting") {
        //自动翻盖
        if (data.data.autoFlip != undefined) {
          console.log("updateUI: autoFlip = ", data.data.autoFlip);
          this.coverValue = data.data.autoFlip;
        }
        //冲刷模式
        if (data.data.flushMode != undefined) {
          console.log("updateUI: flushMode = ", data.data.flushMode);
          this.flushModeValue = data.data.flushMode;
        }
        //氛围灯模式
        if (data.data.ambientLight !== undefined) {
          console.log("updateUI: ambientLight = ", data.data.ambientLight);
          this.lightModeValue = data.data.ambientLight;
        }
        //自动翻盖模式
        if (data.data.sensingRange !== undefined) {
          console.log("updateUI: sensingRange = ", data.data.sensingRange);
          this.autoCoverModeValue = data.data.sensingRange;
        }
        //手势控制
        if (data.data.handSwing !== undefined) {
          this.handControlValue = data.data.handSwing === 1;
        }
        //自动小冲
        if (data.data.autoSmallFlushing !== undefined) {
          this.smallFlushValue = data.data.autoSmallFlushing === 1;
        }
        //UV杀菌
        if (data.data.UVDisinfect !== undefined) {
          this.uvValue = data.data.UVDisinfect === 1;
        }
        //预湿润
        if (data.data.prewet !== undefined) {
          this.autoMoistValue = data.data.prewet === 1;
        }
        //落座发泡
        if (data.data.sitdownFoaming !== undefined) {
          this.sitBubbleValue = data.data.sitdownFoaming === 1;
        }
        //关盖冲厕
        if (data.data.closeLidToFlushing !== undefined) {
          this.closeLidToFlushingValue = data.data.closeLidToFlushing === 1;
        }
        //四季温感
        if (data.data.tempSensor !== undefined) {
          this.tempValue = data.data.tempSensor === 1;
        }
        //自动冲刷
        if (data.data.autoFlushing !== undefined) {
          this.flushValue = data.data.autoFlushing === 1;
        }
        //自动除臭
        if (data.data.autoDeodorization !== undefined) {
          this.autoDeodorizeValue = data.data.autoDeodorization === 1;
        }
        //开圈发泡
        if (data.data.seatOpenFoaming !== undefined) {
          this.ringBubbleValue = data.data.seatOpenFoaming === 1;
        }
        //光感夜灯
        if (data.data.lightSense !== undefined) {
          this.lightValue = data.data.lightSense === 1;
        }
        //风门摆动
        if (data.data.swingDry !== undefined) {
          this.swingValue = data.data.swingDry === 1;
        }
        //氛围灯
        if (data.data.ambientLight !== undefined) {
          this.atmosphereLight = data.data.ambientLight === 1;
        }
        //脚感小冲
        if (data.data.footFeel !== undefined) {
          this.footfeelFlush = data.data.footFeel === 1;
        }
      } else if (data.sid !== undefined && data.sid === "toiletGear") {
        //红光理疗时长
        if (data.data.redLight !== undefined) {
          this.redLightTimeValue = data.data.redLight === 1;
        }
        //蓝光理疗时长
        if (data.data.blueLight !== undefined) {
          this.blueLightTimeValue = data.data.blueLight === 1;
        }
      }
    },

    //返回前一个页面
    goBack: function () {
      //replace替换原路由，作用是避免回退死循环
      this.$router.replace({ path: "/" });
      //关闭页面返回上一级页面时，向上一级页面发送消息
      eventBus.$emit("SettingPage_goback", "我是设置页面的数据");
      // this.$router.go(-1);//添加右滑或点击系统返回键退出页面的监听器后，不能调用原路由返回
    },

    gotoMoreSetting: function () {
      //跳转到鸿蒙默认的设置页面
      console.log("更多设置");
      jumpToSetting();
    },
  },
};
</script>
<style scoped>
.settingSwitchItem {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 48px;
  align-items: center;
}

.settingSwitchItem .title {
  font-size: 16px;
  color: var(--current-primary-color);
}

.settingSwitchItem .switch {
  margin-right: 0px;
  /* background-color: #dedede; */
}
</style>
